<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!--引入JQUERY-->
    <script src="jquery/jquery-1.11.1-min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="jquery/echarts/echarts.min.js"></script>
    <title>演示Echarts插件</title>
    <script type="text/javascript">
        $(function () {
            //当页面加载完成之后，发送异步请求，查询交易表中各个阶段的数据量
            $.ajax({
                url:'workbench/chart/transaction/queryCountOfTranGroupByStage.do',
                type:'post',
                dataType:'json',
                success:function (data) {
                    //对容器调用工具函数
                    // 基于准备好的dom，初始化echarts实例
                    var myChart1 = echarts.init(document.getElementById('main1'));
                    var myChart2 = echarts.init(document.getElementById('main2'));
                    var option1 = {
                        legend: {
                            top: 'bottom'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        series: [
                            {
                                name: 'Nightingale Chart',
                                type: 'pie',
                                radius: [50, 250],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                data: data.chartVOList
                            }
                        ]
                    };
                    var option2 = {
                        xAxis: {
                            type: 'category',
                            data: data.nameList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: data.valueList,
                                type: 'bar'
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart1.setOption(option1);
                    myChart2.setOption(option2);
                }
            });
        });
    </script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main1" style="width: 1000px;height:800px;align-items: center"></div>
<div id="main2" style="width: 1000px;height:800px;align-items: center"></div>
</body>
</html>
